<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="generator" content="pandoc" />


<meta name="author" content="Yiying Wang" />

<meta name="date" content="2017-03-15" />

<title>Basic Plots 21 - Pie Chart</title>

<script src="libs/jquery-1.11.3/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="libs/bootstrap-3.3.5/css/cosmo.min.css" rel="stylesheet" />
<script src="libs/bootstrap-3.3.5/js/bootstrap.min.js"></script>
<script src="libs/bootstrap-3.3.5/shim/html5shiv.min.js"></script>
<script src="libs/bootstrap-3.3.5/shim/respond.min.js"></script>
<script src="libs/navigation-1.1/tabsets.js"></script>
<script src="libs/htmlwidgets-0.8/htmlwidgets.js"></script>
<script src="libs/echarts-2.2.7/echarts-all.js"></script>
<script src="libs/charts-ext-2.2.7/main.js"></script>
<script src="libs/charts-ext-2.2.7/BMap.js"></script>
<script src="libs/echarts-binding-0.2/echarts.js"></script>


<style type="text/css">code{white-space: pre;}</style>
<style type="text/css">
div.sourceCode { overflow-x: auto; }
table.sourceCode, tr.sourceCode, td.lineNumbers, td.sourceCode {
  margin: 0; padding: 0; vertical-align: baseline; border: none; }
table.sourceCode { width: 100%; line-height: 100%; }
td.lineNumbers { text-align: right; padding-right: 4px; padding-left: 4px; color: #aaaaaa; border-right: 1px solid #aaaaaa; }
td.sourceCode { padding-left: 5px; }
code > span.kw { color: #007020; font-weight: bold; } /* Keyword */
code > span.dt { color: #902000; } /* DataType */
code > span.dv { color: #40a070; } /* DecVal */
code > span.bn { color: #40a070; } /* BaseN */
code > span.fl { color: #40a070; } /* Float */
code > span.ch { color: #4070a0; } /* Char */
code > span.st { color: #4070a0; } /* String */
code > span.co { color: #60a0b0; font-style: italic; } /* Comment */
code > span.ot { color: #007020; } /* Other */
code > span.al { color: #ff0000; font-weight: bold; } /* Alert */
code > span.fu { color: #06287e; } /* Function */
code > span.er { color: #ff0000; font-weight: bold; } /* Error */
code > span.wa { color: #60a0b0; font-weight: bold; font-style: italic; } /* Warning */
code > span.cn { color: #880000; } /* Constant */
code > span.sc { color: #4070a0; } /* SpecialChar */
code > span.vs { color: #4070a0; } /* VerbatimString */
code > span.ss { color: #bb6688; } /* SpecialString */
code > span.im { } /* Import */
code > span.va { color: #19177c; } /* Variable */
code > span.cf { color: #007020; font-weight: bold; } /* ControlFlow */
code > span.op { color: #666666; } /* Operator */
code > span.bu { } /* BuiltIn */
code > span.ex { } /* Extension */
code > span.pp { color: #bc7a00; } /* Preprocessor */
code > span.at { color: #7d9029; } /* Attribute */
code > span.do { color: #ba2121; font-style: italic; } /* Documentation */
code > span.an { color: #60a0b0; font-weight: bold; font-style: italic; } /* Annotation */
code > span.cv { color: #60a0b0; font-weight: bold; font-style: italic; } /* CommentVar */
code > span.in { color: #60a0b0; font-weight: bold; font-style: italic; } /* Information */
</style>
<style type="text/css">
  pre:not([class]) {
    background-color: white;
  }
</style>


<style type="text/css">
h1 {
  font-size: 34px;
}
h1.title {
  font-size: 38px;
}
h2 {
  font-size: 30px;
}
h3 {
  font-size: 24px;
}
h4 {
  font-size: 18px;
}
h5 {
  font-size: 16px;
}
h6 {
  font-size: 12px;
}
.table th:not([align]) {
  text-align: left;
}
</style>

<link rel="stylesheet" href="/home/madlogos/R/x86_64-pc-linux-gnu-library/3.3/knitr/misc/vignette.css" type="text/css" />

</head>

<body>

<style type = "text/css">
.main-container {
  max-width: 940px;
  margin-left: auto;
  margin-right: auto;
}
code {
  color: inherit;
  background-color: rgba(0, 0, 0, 0.04);
}
img {
  max-width:100%;
  height: auto;
}
.tabbed-pane {
  padding-top: 12px;
}
button.code-folding-btn:focus {
  outline: none;
}
</style>



<div class="container-fluid main-container">

<!-- tabsets -->
<script>
$(document).ready(function () {
  window.buildTabsets("TOC");
});
</script>

<!-- code folding -->






<div class="fluid-row" id="header">



<h1 class="title toc-ignore">Basic Plots 21 - Pie Chart</h1>
<h4 class="author"><em>Yiying Wang</em></h4>
<h4 class="date"><em>2017-03-15</em></h4>

</div>

<div id="TOC">
<ul>
<li><a href="#introduction"><span class="toc-section-number">1</span> Introduction</a></li>
<li><a href="#function-call"><span class="toc-section-number">2</span> Function Call</a></li>
<li><a href="#showcase"><span class="toc-section-number">3</span> Showcase</a><ul>
<li><a href="#data-preparation"><span class="toc-section-number">3.1</span> Data Preparation</a></li>
<li><a href="#pie-chart"><span class="toc-section-number">3.2</span> Pie Chart</a><ul>
<li><a href="#single-pie"><span class="toc-section-number">3.2.1</span> Single Pie</a></li>
<li><a href="#multiple-pies"><span class="toc-section-number">3.2.2</span> Multiple Pies</a></li>
<li><a href="#multiple-series-without-x"><span class="toc-section-number">3.2.3</span> Multiple Series without X</a></li>
<li><a href="#multi-ring-pie-charts"><span class="toc-section-number">3.2.4</span> Multi-ring Pie Charts</a></li>
<li><a href="#pies-with-timeline"><span class="toc-section-number">3.2.5</span> Pies With Timeline</a></li>
</ul></li>
<li><a href="#ring-chart"><span class="toc-section-number">3.3</span> Ring Chart</a><ul>
<li><a href="#regular-ring-chart"><span class="toc-section-number">3.3.1</span> Regular Ring Chart</a></li>
<li><a href="#infographic-ring-chart"><span class="toc-section-number">3.3.2</span> Infographic Ring Chart</a></li>
</ul></li>
<li><a href="#nighingale-rose-chart"><span class="toc-section-number">3.4</span> Nighingale Rose Chart</a><ul>
<li><a href="#radius-mode"><span class="toc-section-number">3.4.1</span> Radius Mode</a></li>
</ul></li>
<li><a href="#area-mode"><span class="toc-section-number">3.5</span> Area Mode</a></li>
</ul></li>
<li><a href="#futher-setup"><span class="toc-section-number">4</span> Futher Setup</a></li>
</ul>
</div>

<p>First, you should load <code>recharts</code>:</p>
<div class="sourceCode"><pre class="sourceCode r"><code class="sourceCode r"><span class="kw">library</span>(recharts)</code></pre></div>
<div id="introduction" class="section level1">
<h1><span class="header-section-number">1</span> Introduction</h1>
<p>Pie plot includes 3 basic types:</p>
<ul>
<li>Pie: pie</li>
<li>Ring: ring</li>
<li>Nightingale rose chart: rose</li>
</ul>
<table id="intro">
<tr>
<td>
<div id="htmlwidget-b4fbd201034cb7a11390" style="width:400px;height:300px;" class="echarts html-widget"></div>
<script type="application/json" data-for="htmlwidget-b4fbd201034cb7a11390">{"x":{"series":[{"name":"1st","type":"pie","data":[{"name":"No","value":122,"itemStyle":{"normal":{"label":{"show":false},"labelLine":{"show":false}}}},{"name":"Yes","value":203,"itemStyle":{"normal":{"label":{"show":false},"labelLine":{"show":false}}}}],"center":["27.5%","27.5%"],"width":"42.5%","x":"6.25%","radius":"42.5%","max":203,"height":"42.5%","y":"6.25%","selectedMode":"single"},{"name":"2nd","type":"pie","data":[{"name":"No","value":167,"itemStyle":{"normal":{"label":{"show":false},"labelLine":{"show":false}}}},{"name":"Yes","value":118,"itemStyle":{"normal":{"label":{"show":false},"labelLine":{"show":false}}}}],"center":["72.5%","27.5%"],"width":"42.5%","x":"51.25%","radius":"42.5%","max":167,"height":"42.5%","y":"6.25%","selectedMode":"single"},{"name":"3rd","type":"pie","data":[{"name":"No","value":528,"itemStyle":{"normal":{"label":{"show":false},"labelLine":{"show":false}}}},{"name":"Yes","value":178,"itemStyle":{"normal":{"label":{"show":false},"labelLine":{"show":false}}}}],"center":["27.5%","72.5%"],"width":"42.5%","x":"6.25%","radius":"42.5%","max":528,"height":"42.5%","y":"51.25%","selectedMode":"single"},{"name":"Crew","type":"pie","data":[{"name":"No","value":673,"itemStyle":{"normal":{"label":{"show":false},"labelLine":{"show":false}}}},{"name":"Yes","value":212,"itemStyle":{"normal":{"label":{"show":false},"labelLine":{"show":false}}}}],"center":["72.5%","72.5%"],"width":"42.5%","x":"51.25%","radius":"42.5%","max":673,"height":"42.5%","y":"51.25%","selectedMode":"single"}],"xAxis":[{"type":"category","show":false,"position":"bottom","name":"","nameLocation":"end","boundaryGap":[0,0],"scale":true,"axisLine":{"show":true,"onZero":false},"axisTick":{"show":false},"axisLabel":{"show":true},"splitLine":{"show":true},"splitArea":{"show":false},"data":["No","Yes"]}],"yAxis":[{"type":"value","show":false,"position":"left","name":"","nameLocation":"end","boundaryGap":[0,0],"scale":true,"axisLine":{"show":true,"onZero":false},"axisTick":{"show":false},"axisLabel":{"show":true},"splitLine":{"show":true},"splitArea":{"show":false}}],"grid":{"borderWidth":0},"tooltip":{"show":true,"trigger":"item","axisPointer":{"type":"none","crossStyle":{"type":"dashed"},"lineStyle":{"type":"solid","width":1},"shadowStyle":{"color":"rgba(150,150,150,0.3)","width":"auto","type":"default"}},"textStyle":{"color":"#fff"},"formatter":"{a} <br/>{b} : {c} ({d}%)","islandFormatter":"{a} < br/>{b} : {c}","enterable":false,"showDelay":20,"hideDelay":100,"transitionDuration":0.4,"backgroundColor":"rgba(0,0,0,0.7)","borderColor":"#333","borderWidth":0,"borderRadius":4},"toolbox":{"show":true,"feature":{"mark":{"show":true},"dataZoom":{"show":true},"dataView":{"show":true,"readOnly":false},"magicType":{"show":true,"type":["pie","funnel"]},"restore":{"show":true},"saveAsImage":{"show":true}},"x":"right","y":"top","orient":"horizontal"},"legend":{"show":true,"data":["No","Yes"],"x":"right","y":"center","orient":"vertical"},"theme":"infographic","title":{"text":"Titanic: Survival by Cabin Class","subtext":"pie","x":"center","y":"bottom","orient":"horizontal"}},"evals":[],"jsHooks":[]}</script>
</td>
<td>
<div id="htmlwidget-e7a715ac888336dfe6be" style="width:400px;height:300px;" class="echarts html-widget"></div>
<script type="application/json" data-for="htmlwidget-e7a715ac888336dfe6be">{"x":{"series":[{"name":"1st","type":"pie","data":[{"name":"No","value":122,"itemStyle":{"normal":{"label":{"show":false},"labelLine":{"show":false}}}},{"name":"Yes","value":203,"itemStyle":{"normal":{"label":{"show":false},"labelLine":{"show":false}}}}],"center":["27.5%","27.5%"],"width":"42.5%","x":"6.25%","radius":["21.25%","42.5%"],"max":203,"height":"42.5%","y":"6.25%","selectedMode":"single","itemStyle":{"normal":{"label":{"show":true}},"emphasis":{"label":{"show":true,"position":"center","textStyle":{"fontSize":"30","fontWeight":"bold"}}}},"clockWise":false},{"name":"2nd","type":"pie","data":[{"name":"No","value":167,"itemStyle":{"normal":{"label":{"show":false},"labelLine":{"show":false}}}},{"name":"Yes","value":118,"itemStyle":{"normal":{"label":{"show":false},"labelLine":{"show":false}}}}],"center":["72.5%","27.5%"],"width":"42.5%","x":"51.25%","radius":["21.25%","42.5%"],"max":167,"height":"42.5%","y":"6.25%","selectedMode":"single","itemStyle":{"normal":{"label":{"show":true}},"emphasis":{"label":{"show":true,"position":"center","textStyle":{"fontSize":"30","fontWeight":"bold"}}}},"clockWise":false},{"name":"3rd","type":"pie","data":[{"name":"No","value":528,"itemStyle":{"normal":{"label":{"show":false},"labelLine":{"show":false}}}},{"name":"Yes","value":178,"itemStyle":{"normal":{"label":{"show":false},"labelLine":{"show":false}}}}],"center":["27.5%","72.5%"],"width":"42.5%","x":"6.25%","radius":["21.25%","42.5%"],"max":528,"height":"42.5%","y":"51.25%","selectedMode":"single","itemStyle":{"normal":{"label":{"show":true}},"emphasis":{"label":{"show":true,"position":"center","textStyle":{"fontSize":"30","fontWeight":"bold"}}}},"clockWise":false},{"name":"Crew","type":"pie","data":[{"name":"No","value":673,"itemStyle":{"normal":{"label":{"show":false},"labelLine":{"show":false}}}},{"name":"Yes","value":212,"itemStyle":{"normal":{"label":{"show":false},"labelLine":{"show":false}}}}],"center":["72.5%","72.5%"],"width":"42.5%","x":"51.25%","radius":["21.25%","42.5%"],"max":673,"height":"42.5%","y":"51.25%","selectedMode":"single","itemStyle":{"normal":{"label":{"show":true}},"emphasis":{"label":{"show":true,"position":"center","textStyle":{"fontSize":"30","fontWeight":"bold"}}}},"clockWise":false}],"xAxis":[{"type":"category","show":false,"position":"bottom","name":"","nameLocation":"end","boundaryGap":[0,0],"scale":true,"axisLine":{"show":true,"onZero":false},"axisTick":{"show":false},"axisLabel":{"show":true},"splitLine":{"show":true},"splitArea":{"show":false},"data":["No","Yes"]}],"yAxis":[{"type":"value","show":false,"position":"left","name":"","nameLocation":"end","boundaryGap":[0,0],"scale":true,"axisLine":{"show":true,"onZero":false},"axisTick":{"show":false},"axisLabel":{"show":true},"splitLine":{"show":true},"splitArea":{"show":false}}],"grid":{"borderWidth":0},"tooltip":{"show":true,"trigger":"item","axisPointer":{"type":"none","crossStyle":{"type":"dashed"},"lineStyle":{"type":"solid","width":1},"shadowStyle":{"color":"rgba(150,150,150,0.3)","width":"auto","type":"default"}},"textStyle":{"color":"#fff"},"formatter":"{a} <br/>{b} : {c} ({d}%)","islandFormatter":"{a} < br/>{b} : {c}","enterable":false,"showDelay":20,"hideDelay":100,"transitionDuration":0.4,"backgroundColor":"rgba(0,0,0,0.7)","borderColor":"#333","borderWidth":0,"borderRadius":4},"toolbox":{"show":true,"feature":{"mark":{"show":true},"dataZoom":{"show":true},"dataView":{"show":true,"readOnly":false},"magicType":{"show":true,"type":["pie","funnel"]},"restore":{"show":true},"saveAsImage":{"show":true}},"x":"right","y":"top","orient":"horizontal"},"legend":{"show":true,"data":["No","Yes"],"x":"right","y":"center","orient":"vertical"},"theme":"roma","title":{"text":"Titanic: Outcome by Cabin Class","subtext":"ring","x":"center","y":"bottom","orient":"horizontal"}},"evals":[],"jsHooks":[]}</script>
</td>
</tr>
<tr>
<td>
<div id="htmlwidget-2b1e2861a973176ef6a2" style="width:400px;height:300px;" class="echarts html-widget"></div>
<script type="application/json" data-for="htmlwidget-2b1e2861a973176ef6a2">{"x":{"series":[{"name":"1st","type":"pie","data":[{"name":"No","value":122,"itemStyle":{"normal":{"label":{"show":false},"labelLine":{"show":false}}}},{"name":"Yes","value":203,"itemStyle":{"normal":{"label":{"show":false},"labelLine":{"show":false}}}}],"center":["27.5%","27.5%"],"width":"42.5%","x":"6.25%","radius":["8.5%","42.5%"],"max":203,"height":"42.5%","y":"6.25%","selectedMode":"single","roseType":"radius"},{"name":"2nd","type":"pie","data":[{"name":"No","value":167,"itemStyle":{"normal":{"label":{"show":false},"labelLine":{"show":false}}}},{"name":"Yes","value":118,"itemStyle":{"normal":{"label":{"show":false},"labelLine":{"show":false}}}}],"center":["72.5%","27.5%"],"width":"42.5%","x":"51.25%","radius":["8.5%","42.5%"],"max":167,"height":"42.5%","y":"6.25%","selectedMode":"single","roseType":"radius"},{"name":"3rd","type":"pie","data":[{"name":"No","value":528,"itemStyle":{"normal":{"label":{"show":false},"labelLine":{"show":false}}}},{"name":"Yes","value":178,"itemStyle":{"normal":{"label":{"show":false},"labelLine":{"show":false}}}}],"center":["27.5%","72.5%"],"width":"42.5%","x":"6.25%","radius":["8.5%","42.5%"],"max":528,"height":"42.5%","y":"51.25%","selectedMode":"single","roseType":"radius"},{"name":"Crew","type":"pie","data":[{"name":"No","value":673,"itemStyle":{"normal":{"label":{"show":false},"labelLine":{"show":false}}}},{"name":"Yes","value":212,"itemStyle":{"normal":{"label":{"show":false},"labelLine":{"show":false}}}}],"center":["72.5%","72.5%"],"width":"42.5%","x":"51.25%","radius":["8.5%","42.5%"],"max":673,"height":"42.5%","y":"51.25%","selectedMode":"single","roseType":"radius"}],"xAxis":[{"type":"category","show":false,"position":"bottom","name":"","nameLocation":"end","boundaryGap":[0,0],"scale":true,"axisLine":{"show":true,"onZero":false},"axisTick":{"show":false},"axisLabel":{"show":true},"splitLine":{"show":true},"splitArea":{"show":false},"data":["No","Yes"]}],"yAxis":[{"type":"value","show":false,"position":"left","name":"","nameLocation":"end","boundaryGap":[0,0],"scale":true,"axisLine":{"show":true,"onZero":false},"axisTick":{"show":false},"axisLabel":{"show":true},"splitLine":{"show":true},"splitArea":{"show":false}}],"grid":{"borderWidth":0},"tooltip":{"show":true,"trigger":"item","axisPointer":{"type":"none","crossStyle":{"type":"dashed"},"lineStyle":{"type":"solid","width":1},"shadowStyle":{"color":"rgba(150,150,150,0.3)","width":"auto","type":"default"}},"textStyle":{"color":"#fff"},"formatter":"{a} <br/>{b} : {c} ({d}%)","islandFormatter":"{a} < br/>{b} : {c}","enterable":false,"showDelay":20,"hideDelay":100,"transitionDuration":0.4,"backgroundColor":"rgba(0,0,0,0.7)","borderColor":"#333","borderWidth":0,"borderRadius":4},"toolbox":{"show":true,"feature":{"mark":{"show":true},"dataZoom":{"show":true},"dataView":{"show":true,"readOnly":false},"magicType":{"show":true,"type":["pie","funnel"]},"restore":{"show":true},"saveAsImage":{"show":true}},"x":"right","y":"top","orient":"horizontal"},"legend":{"show":true,"data":["No","Yes"],"x":"right","y":"center","orient":"vertical"},"theme":"macarons2","title":{"text":"Titanic: Outcome by Cabin Class","subtext":"rose","x":"center","y":"bottom","orient":"horizontal"}},"evals":[],"jsHooks":[]}</script>
</td>
<td>
</td>
</tr>
</table>
<p>The keys are:</p>
<ul>
<li>character <code>x</code> and numeric <code>y</code> and will be compacted using <code>data.table::dcast</code> with <code>fun=sum</code></li>
<li><strong><code>x</code> is used as series, <code>series</code> is used to produce multi-tier pies/rings, while <code>facet</code> is used to produce separate pies!</strong></li>
<li>Pie and funnel charts can shift from one to another by clicking type shift buttons in the toolbox widget.</li>
</ul>
</div>
<div id="function-call" class="section level1">
<h1><span class="header-section-number">2</span> Function Call</h1>
<div class="sourceCode"><pre class="sourceCode r"><code class="sourceCode r"><span class="kw">echartr</span>(data, x, &lt;y&gt;, &lt;series&gt;, &lt;facet&gt;, &lt;t&gt;, &lt;type&gt;, &lt;subtype&gt;)</code></pre></div>
<table>
<colgroup>
<col width="11%" />
<col width="88%" />
</colgroup>
<thead>
<tr class="header">
<th>Arg</th>
<th>Requirement</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td><p><strong>data</strong></p></td>
<td><p>source data in the form of data.frame</p></td>
</tr>
<tr class="even">
<td><p><strong>x</strong></p></td>
<td><p>character independent variable. Each level of <code>x</code> is treated as a data series. Other type will be coerced to factors. Only the first one is accepted if multiple variables are provided.</p></td>
</tr>
<tr class="odd">
<td><p>y</p></td>
<td><p>numeric dependent variable. Only the first one is accepted if multiple variables are provided.</p></td>
</tr>
<tr class="even">
<td><p>series</p></td>
<td><p>series variable which will be coerced to factors. Each level of <code>series</code> is treated as a tyre factor to produce rings towards the center. Only the first one is accepted if multiple variables are provided.</p></td>
</tr>
<tr class="odd">
<td><p>facet</p></td>
<td><p>facetting variable which will be coerced to factors. Each level of <code>facet</code> is treated as a subsetting factor to produce separate pies. Only the first one is accepted if multiple variables are provided.</p></td>
</tr>
<tr class="even">
<td><p>t</p></td>
<td><p>timeline variable which will be coerced to factors. Only the first one is accepted if multiple variables are provided.</p></td>
</tr>
<tr class="odd">
<td><p>type</p></td>
<td><p>‘pie’, ‘ring’, ‘rose’.</p></td>
</tr>
<tr class="even">
<td><p>subtype</p></td>
<td><ul>
<li>pie: c(“multi”,“clock”,“clockwise”)
<ul>
<li>multi: multiple select mode</li>
<li>clock/clokwise: pie/ring display clockwise</li>
</ul></li>
<li>ring: c(“info”,“multi”,“clock”,“clockwise”)
<ul>
<li>info: infographic ring</li>
</ul></li>
<li>rose: c(“area”,“radius”,“multi”,“clock”,“clockwise”)
<ul>
<li>area: rose chart in area mode</li>
<li>radius: rose chart in radius mode</li>
</ul></li>
</ul></td>
</tr>
</tbody>
</table>
</div>
<div id="showcase" class="section level1">
<h1><span class="header-section-number">3</span> Showcase</h1>
<div id="data-preparation" class="section level2">
<h2><span class="header-section-number">3.1</span> Data Preparation</h2>
<p>Let’s look into <code>Titanic</code> dataset embeded in the package <code>datasets</code>. The survival count by cabin class is shown as below:</p>
<div class="sourceCode"><pre class="sourceCode r"><code class="sourceCode r">titanic &lt;-<span class="st"> </span>data.table::<span class="kw">melt</span>(<span class="kw">apply</span>(Titanic, <span class="kw">c</span>(<span class="dv">1</span>,<span class="dv">4</span>), sum))
<span class="kw">names</span>(titanic) &lt;-<span class="st"> </span><span class="kw">c</span>(<span class="st">&#39;Class&#39;</span>, <span class="st">&#39;Survived&#39;</span>, <span class="st">&#39;Count&#39;</span>)
knitr::<span class="kw">kable</span>(titanic)</code></pre></div>
<table>
<thead>
<tr class="header">
<th align="left">Class</th>
<th align="left">Survived</th>
<th align="right">Count</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td align="left">1st</td>
<td align="left">No</td>
<td align="right">122</td>
</tr>
<tr class="even">
<td align="left">2nd</td>
<td align="left">No</td>
<td align="right">167</td>
</tr>
<tr class="odd">
<td align="left">3rd</td>
<td align="left">No</td>
<td align="right">528</td>
</tr>
<tr class="even">
<td align="left">Crew</td>
<td align="left">No</td>
<td align="right">673</td>
</tr>
<tr class="odd">
<td align="left">1st</td>
<td align="left">Yes</td>
<td align="right">203</td>
</tr>
<tr class="even">
<td align="left">2nd</td>
<td align="left">Yes</td>
<td align="right">118</td>
</tr>
<tr class="odd">
<td align="left">3rd</td>
<td align="left">Yes</td>
<td align="right">178</td>
</tr>
<tr class="even">
<td align="left">Crew</td>
<td align="left">Yes</td>
<td align="right">212</td>
</tr>
</tbody>
</table>
</div>
<div id="pie-chart" class="section level2">
<h2><span class="header-section-number">3.2</span> Pie Chart</h2>
<div id="single-pie" class="section level3">
<h3><span class="header-section-number">3.2.1</span> Single Pie</h3>
<p><code>type</code> is set ‘pie’.</p>
<div class="sourceCode"><pre class="sourceCode r"><code class="sourceCode r"><span class="kw">echartr</span>(titanic, Class, Count, <span class="dt">type=</span><span class="st">&#39;pie&#39;</span>) %&gt;%
<span class="st">    </span><span class="kw">setTitle</span>(<span class="st">&#39;Titanic: N by Cabin Class&#39;</span>)</code></pre></div>
<div id="htmlwidget-94c687baed1652c448ca" style="width:672px;height:480px;" class="echarts html-widget"></div>
<script type="application/json" data-for="htmlwidget-94c687baed1652c448ca">{"x":{"series":[{"name":"Proportion","type":"pie","data":[{"name":"1st","value":325,"itemStyle":{"normal":{"label":{"show":false},"labelLine":{"show":false}}}},{"name":"2nd","value":285,"itemStyle":{"normal":{"label":{"show":false},"labelLine":{"show":false}}}},{"name":"3rd","value":706,"itemStyle":{"normal":{"label":{"show":false},"labelLine":{"show":false}}}},{"name":"Crew","value":885,"itemStyle":{"normal":{"label":{"show":false},"labelLine":{"show":false}}}}],"center":["50%","50%"],"width":"90%","x":"5%","radius":"90%","max":885,"height":"70%","y":"15%","selectedMode":"single"}],"xAxis":[{"type":"category","show":false,"position":"bottom","name":"","nameLocation":"end","boundaryGap":[0,0],"scale":true,"axisLine":{"show":true,"onZero":false},"axisTick":{"show":false},"axisLabel":{"show":true},"splitLine":{"show":true},"splitArea":{"show":false},"data":["1st","2nd","3rd","Crew"]}],"yAxis":[{"type":"value","show":false,"position":"left","name":"","nameLocation":"end","boundaryGap":[0,0],"scale":true,"axisLine":{"show":true,"onZero":false},"axisTick":{"show":false},"axisLabel":{"show":true},"splitLine":{"show":true},"splitArea":{"show":false}}],"grid":{"borderWidth":0},"tooltip":{"show":true,"trigger":"item","axisPointer":{"type":"none","crossStyle":{"type":"dashed"},"lineStyle":{"type":"solid","width":1},"shadowStyle":{"color":"rgba(150,150,150,0.3)","width":"auto","type":"default"}},"textStyle":{"color":"#fff"},"formatter":"{a} <br/>{b} : {c} ({d}%)","islandFormatter":"{a} < br/>{b} : {c}","enterable":false,"showDelay":20,"hideDelay":100,"transitionDuration":0.4,"backgroundColor":"rgba(0,0,0,0.7)","borderColor":"#333","borderWidth":0,"borderRadius":4},"toolbox":{"show":true,"feature":{"mark":{"show":true},"dataZoom":{"show":true},"dataView":{"show":true,"readOnly":false},"magicType":{"show":true,"type":["pie","funnel"]},"restore":{"show":true},"saveAsImage":{"show":true}},"x":"right","y":"top","orient":"horizontal"},"legend":{"show":true,"data":["1st","2nd","3rd","Crew"],"x":"left","y":"top","orient":"horizontal"},"title":{"text":"Titanic: N by Cabin Class","x":"center","y":"bottom","orient":"horizontal"}},"evals":[],"jsHooks":[]}</script>
</div>
<div id="multiple-pies" class="section level3">
<h3><span class="header-section-number">3.2.2</span> Multiple Pies</h3>
<p>Pie chart uses <code>facet</code> as subsetting factor to produce seperate polar systems. So when we apply <code>Class</code> (containing 4 levels) as <code>facet</code>, we get 4 pies.</p>
<div class="sourceCode"><pre class="sourceCode r"><code class="sourceCode r"><span class="kw">echartr</span>(titanic, Survived, Count, <span class="dt">facet=</span>Class, <span class="dt">type=</span><span class="st">&#39;pie&#39;</span>) %&gt;%
<span class="st">    </span><span class="kw">setTitle</span>(<span class="st">&#39;Titanic: Survival Outcome by Cabin Class&#39;</span>)</code></pre></div>
<div id="htmlwidget-014667f0bc57ff866a01" style="width:672px;height:480px;" class="echarts html-widget"></div>
<script type="application/json" data-for="htmlwidget-014667f0bc57ff866a01">{"x":{"series":[{"name":"1st","type":"pie","data":[{"name":"No","value":122,"itemStyle":{"normal":{"label":{"show":false},"labelLine":{"show":false}}}},{"name":"Yes","value":203,"itemStyle":{"normal":{"label":{"show":false},"labelLine":{"show":false}}}}],"center":["27.5%","27.5%"],"width":"42.5%","x":"6.25%","radius":"42.5%","max":203,"height":"42.5%","y":"6.25%","selectedMode":"single"},{"name":"2nd","type":"pie","data":[{"name":"No","value":167,"itemStyle":{"normal":{"label":{"show":false},"labelLine":{"show":false}}}},{"name":"Yes","value":118,"itemStyle":{"normal":{"label":{"show":false},"labelLine":{"show":false}}}}],"center":["72.5%","27.5%"],"width":"42.5%","x":"51.25%","radius":"42.5%","max":167,"height":"42.5%","y":"6.25%","selectedMode":"single"},{"name":"3rd","type":"pie","data":[{"name":"No","value":528,"itemStyle":{"normal":{"label":{"show":false},"labelLine":{"show":false}}}},{"name":"Yes","value":178,"itemStyle":{"normal":{"label":{"show":false},"labelLine":{"show":false}}}}],"center":["27.5%","72.5%"],"width":"42.5%","x":"6.25%","radius":"42.5%","max":528,"height":"42.5%","y":"51.25%","selectedMode":"single"},{"name":"Crew","type":"pie","data":[{"name":"No","value":673,"itemStyle":{"normal":{"label":{"show":false},"labelLine":{"show":false}}}},{"name":"Yes","value":212,"itemStyle":{"normal":{"label":{"show":false},"labelLine":{"show":false}}}}],"center":["72.5%","72.5%"],"width":"42.5%","x":"51.25%","radius":"42.5%","max":673,"height":"42.5%","y":"51.25%","selectedMode":"single"}],"xAxis":[{"type":"category","show":false,"position":"bottom","name":"","nameLocation":"end","boundaryGap":[0,0],"scale":true,"axisLine":{"show":true,"onZero":false},"axisTick":{"show":false},"axisLabel":{"show":true},"splitLine":{"show":true},"splitArea":{"show":false},"data":["No","Yes"]}],"yAxis":[{"type":"value","show":false,"position":"left","name":"","nameLocation":"end","boundaryGap":[0,0],"scale":true,"axisLine":{"show":true,"onZero":false},"axisTick":{"show":false},"axisLabel":{"show":true},"splitLine":{"show":true},"splitArea":{"show":false}}],"grid":{"borderWidth":0},"tooltip":{"show":true,"trigger":"item","axisPointer":{"type":"none","crossStyle":{"type":"dashed"},"lineStyle":{"type":"solid","width":1},"shadowStyle":{"color":"rgba(150,150,150,0.3)","width":"auto","type":"default"}},"textStyle":{"color":"#fff"},"formatter":"{a} <br/>{b} : {c} ({d}%)","islandFormatter":"{a} < br/>{b} : {c}","enterable":false,"showDelay":20,"hideDelay":100,"transitionDuration":0.4,"backgroundColor":"rgba(0,0,0,0.7)","borderColor":"#333","borderWidth":0,"borderRadius":4},"toolbox":{"show":true,"feature":{"mark":{"show":true},"dataZoom":{"show":true},"dataView":{"show":true,"readOnly":false},"magicType":{"show":true,"type":["pie","funnel"]},"restore":{"show":true},"saveAsImage":{"show":true}},"x":"right","y":"top","orient":"horizontal"},"legend":{"show":true,"data":["No","Yes"],"x":"left","y":"top","orient":"horizontal"},"title":{"text":"Titanic: Survival Outcome by Cabin Class","x":"center","y":"bottom","orient":"horizontal"}},"evals":[],"jsHooks":[]}</script>
</div>
<div id="multiple-series-without-x" class="section level3">
<h3><span class="header-section-number">3.2.3</span> Multiple Series without X</h3>
<p>What if we only provide <code>facet</code> and <code>y</code>? We get several dichotomous pies.</p>
<div class="sourceCode"><pre class="sourceCode r"><code class="sourceCode r"><span class="kw">echartr</span>(titanic, <span class="dt">y=</span>Count, <span class="dt">facet=</span>Class, <span class="dt">type=</span><span class="st">&#39;pie&#39;</span>) %&gt;%
<span class="st">    </span><span class="kw">setTitle</span>(<span class="st">&#39;Titanic: Propotion of Each Cabin Class&#39;</span>)</code></pre></div>
<div id="htmlwidget-9d3ea932af129518d08a" style="width:672px;height:480px;" class="echarts html-widget"></div>
<script type="application/json" data-for="htmlwidget-9d3ea932af129518d08a">{"x":{"series":[{"name":"1st","type":"pie","data":[{"name":"1st","value":325,"itemStyle":{"normal":{"label":{"show":false},"labelLine":{"show":false}}}},{"name":"","value":1876,"itemStyle":{"normal":{"color":"#ccc","label":{"show":false,"position":"center"},"labelLine":{"show":false}},"emphasis":{"color":"rgba(0,0,0,0)"}}}],"center":["27.5%","27.5%"],"width":"42.5%","x":"6.25%","radius":"42.5%","max":1876,"height":"42.5%","y":"6.25%","selectedMode":"single"},{"name":"2nd","type":"pie","data":[{"name":"2nd","value":285,"itemStyle":{"normal":{"label":{"show":false},"labelLine":{"show":false}}}},{"name":"","value":1916,"itemStyle":{"normal":{"color":"#ccc","label":{"show":false,"position":"center"},"labelLine":{"show":false}},"emphasis":{"color":"rgba(0,0,0,0)"}}}],"center":["72.5%","27.5%"],"width":"42.5%","x":"51.25%","radius":"42.5%","max":1916,"height":"42.5%","y":"6.25%","selectedMode":"single"},{"name":"3rd","type":"pie","data":[{"name":"3rd","value":706,"itemStyle":{"normal":{"label":{"show":false},"labelLine":{"show":false}}}},{"name":"","value":1495,"itemStyle":{"normal":{"color":"#ccc","label":{"show":false,"position":"center"},"labelLine":{"show":false}},"emphasis":{"color":"rgba(0,0,0,0)"}}}],"center":["27.5%","72.5%"],"width":"42.5%","x":"6.25%","radius":"42.5%","max":1495,"height":"42.5%","y":"51.25%","selectedMode":"single"},{"name":"Crew","type":"pie","data":[{"name":"Crew","value":885,"itemStyle":{"normal":{"label":{"show":false},"labelLine":{"show":false}}}},{"name":"","value":1316,"itemStyle":{"normal":{"color":"#ccc","label":{"show":false,"position":"center"},"labelLine":{"show":false}},"emphasis":{"color":"rgba(0,0,0,0)"}}}],"center":["72.5%","72.5%"],"width":"42.5%","x":"51.25%","radius":"42.5%","max":1316,"height":"42.5%","y":"51.25%","selectedMode":"single"}],"xAxis":[{"type":"value","show":false,"position":"bottom","name":"","nameLocation":"end","boundaryGap":[0,0],"scale":true,"axisLine":{"show":true,"onZero":false},"axisTick":{"show":false},"axisLabel":{"show":true},"splitLine":{"show":true},"splitArea":{"show":false}}],"yAxis":[{"type":"value","show":false,"position":"left","name":"","nameLocation":"end","boundaryGap":[0,0],"scale":true,"axisLine":{"show":true,"onZero":false},"axisTick":{"show":false},"axisLabel":{"show":true},"splitLine":{"show":true},"splitArea":{"show":false}}],"grid":{"borderWidth":0},"tooltip":{"show":true,"trigger":"item","axisPointer":{"type":"none","crossStyle":{"type":"dashed"},"lineStyle":{"type":"solid","width":1},"shadowStyle":{"color":"rgba(150,150,150,0.3)","width":"auto","type":"default"}},"textStyle":{"color":"#fff"},"formatter":"{a} <br/>{b} : {c} ({d}%)","islandFormatter":"{a} < br/>{b} : {c}","enterable":false,"showDelay":20,"hideDelay":100,"transitionDuration":0.4,"backgroundColor":"rgba(0,0,0,0.7)","borderColor":"#333","borderWidth":0,"borderRadius":4},"toolbox":{"show":true,"feature":{"mark":{"show":true},"dataZoom":{"show":true},"dataView":{"show":true,"readOnly":false},"magicType":{"show":true,"type":["pie","funnel"]},"restore":{"show":true},"saveAsImage":{"show":true}},"x":"right","y":"top","orient":"horizontal"},"legend":{"show":true,"data":["1st","2nd","3rd","Crew"],"x":"left","y":"top","orient":"horizontal"},"title":{"text":"Titanic: Propotion of Each Cabin Class","x":"center","y":"bottom","orient":"horizontal"}},"evals":[],"jsHooks":[]}</script>
</div>
<div id="multi-ring-pie-charts" class="section level3">
<h3><span class="header-section-number">3.2.4</span> Multi-ring Pie Charts</h3>
<p>If <code>series</code> is given, you will yield a multi-ring pie chart. <code>type</code> and <code>subtype</code> are organized as vectors in association with levels of <code>series</code>.</p>
<div class="sourceCode"><pre class="sourceCode r"><code class="sourceCode r"><span class="kw">echartr</span>(titanic, Survived, Count, Class, <span class="dt">type=</span><span class="kw">c</span>(<span class="kw">rep</span>(<span class="st">&#39;ring&#39;</span>, <span class="dv">3</span>), <span class="st">&#39;pie&#39;</span>),
        <span class="dt">subtype=</span><span class="st">&#39;clock&#39;</span>) %&gt;%<span class="st"> </span><span class="kw">setTitle</span>(<span class="st">&#39;Titanic: Survival Outcome by Cabin Class&#39;</span>)</code></pre></div>
<div id="htmlwidget-286599414451980b67f8" style="width:672px;height:480px;" class="echarts html-widget"></div>
<script type="application/json" data-for="htmlwidget-286599414451980b67f8">{"x":{"series":[{"name":"1st","type":"pie","data":[{"name":"No","value":122,"itemStyle":{"normal":{"label":{"show":false},"labelLine":{"show":false}}}},{"name":"Yes","value":203,"itemStyle":{"normal":{"label":{"show":false},"labelLine":{"show":false}}}}],"center":["50%","50%"],"width":"90%","x":"5%","radius":["78.75%","90%"],"max":673,"height":"70%","y":"15%","selectedMode":"single","itemStyle":{"normal":{"label":{"show":true}},"emphasis":{"label":{"show":true,"position":"center","textStyle":{"fontSize":"30","fontWeight":"bold"}}}},"clockWise":true},{"name":"2nd","type":"pie","data":[{"name":"No","value":167,"itemStyle":{"normal":{"label":{"show":false},"labelLine":{"show":false}}}},{"name":"Yes","value":118,"itemStyle":{"normal":{"label":{"show":false},"labelLine":{"show":false}}}}],"center":["50%","50%"],"width":"67.5%","x":"16.25%","radius":["56.25%","67.5%"],"max":673,"height":"70%","y":"15%","selectedMode":"single","itemStyle":{"normal":{"label":{"show":true}},"emphasis":{"label":{"show":true,"position":"center","textStyle":{"fontSize":"30","fontWeight":"bold"}}}},"clockWise":true},{"name":"3rd","type":"pie","data":[{"name":"No","value":528,"itemStyle":{"normal":{"label":{"show":false},"labelLine":{"show":false}}}},{"name":"Yes","value":178,"itemStyle":{"normal":{"label":{"show":false},"labelLine":{"show":false}}}}],"center":["50%","50%"],"width":"45%","x":"27.5%","radius":["33.75%","45%"],"max":673,"height":"70%","y":"15%","selectedMode":"single","itemStyle":{"normal":{"label":{"show":true}},"emphasis":{"label":{"show":true,"position":"center","textStyle":{"fontSize":"30","fontWeight":"bold"}}}},"clockWise":true},{"name":"Crew","type":"pie","data":[{"name":"No","value":673,"itemStyle":{"normal":{"label":{"show":false},"labelLine":{"show":false}}}},{"name":"Yes","value":212,"itemStyle":{"normal":{"label":{"show":false},"labelLine":{"show":false}}}}],"center":["50%","50%"],"width":"22.5%","x":"38.75%","radius":"22.5%","max":673,"height":"70%","y":"15%","selectedMode":"single"}],"legend":{"show":true,"data":["No","Yes"],"x":"left","y":"top","orient":"horizontal"},"xAxis":[{"type":"category","show":false,"position":"bottom","name":"","nameLocation":"end","boundaryGap":[0,0],"scale":true,"axisLine":{"show":true,"onZero":false},"axisTick":{"show":false},"axisLabel":{"show":true},"splitLine":{"show":true},"splitArea":{"show":false},"data":["No","Yes"]}],"yAxis":[{"type":"value","show":false,"position":"left","name":"","nameLocation":"end","boundaryGap":[0,0],"scale":true,"axisLine":{"show":true,"onZero":false},"axisTick":{"show":false},"axisLabel":{"show":true},"splitLine":{"show":true},"splitArea":{"show":false}}],"grid":{"borderWidth":0},"tooltip":{"show":true,"trigger":"item","axisPointer":{"type":"none","crossStyle":{"type":"dashed"},"lineStyle":{"type":"solid","width":1},"shadowStyle":{"color":"rgba(150,150,150,0.3)","width":"auto","type":"default"}},"textStyle":{"color":"#fff"},"formatter":"{a} <br/>{b} : {c} ({d}%)","islandFormatter":"{a} < br/>{b} : {c}","enterable":false,"showDelay":20,"hideDelay":100,"transitionDuration":0.4,"backgroundColor":"rgba(0,0,0,0.7)","borderColor":"#333","borderWidth":0,"borderRadius":4},"toolbox":{"show":true,"feature":{"mark":{"show":true},"dataZoom":{"show":true},"dataView":{"show":true,"readOnly":false},"magicType":{"show":true,"type":["pie","funnel"]},"restore":{"show":true},"saveAsImage":{"show":true}},"x":"right","y":"top","orient":"horizontal"},"title":{"text":"Titanic: Survival Outcome by Cabin Class","x":"center","y":"bottom","orient":"horizontal"}},"evals":[],"jsHooks":[]}</script>
<p>You can use <code>series</code> and <code>facet</code> to produce multiple multi-tier pies.</p>
<div class="sourceCode"><pre class="sourceCode r"><code class="sourceCode r">titanic_sex &lt;-<span class="st"> </span>data.table::<span class="kw">melt</span>(<span class="kw">apply</span>(Titanic, <span class="kw">c</span>(<span class="dv">1</span>,<span class="dv">2</span>,<span class="dv">4</span>), sum))
<span class="kw">names</span>(titanic_sex)[<span class="dv">4</span>] &lt;-<span class="st"> &quot;Count&quot;</span>
knitr::<span class="kw">kable</span>(titanic_sex)</code></pre></div>
<table>
<thead>
<tr class="header">
<th align="left">Class</th>
<th align="left">Sex</th>
<th align="left">Survived</th>
<th align="right">Count</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td align="left">1st</td>
<td align="left">Male</td>
<td align="left">No</td>
<td align="right">118</td>
</tr>
<tr class="even">
<td align="left">2nd</td>
<td align="left">Male</td>
<td align="left">No</td>
<td align="right">154</td>
</tr>
<tr class="odd">
<td align="left">3rd</td>
<td align="left">Male</td>
<td align="left">No</td>
<td align="right">422</td>
</tr>
<tr class="even">
<td align="left">Crew</td>
<td align="left">Male</td>
<td align="left">No</td>
<td align="right">670</td>
</tr>
<tr class="odd">
<td align="left">1st</td>
<td align="left">Female</td>
<td align="left">No</td>
<td align="right">4</td>
</tr>
<tr class="even">
<td align="left">2nd</td>
<td align="left">Female</td>
<td align="left">No</td>
<td align="right">13</td>
</tr>
<tr class="odd">
<td align="left">3rd</td>
<td align="left">Female</td>
<td align="left">No</td>
<td align="right">106</td>
</tr>
<tr class="even">
<td align="left">Crew</td>
<td align="left">Female</td>
<td align="left">No</td>
<td align="right">3</td>
</tr>
<tr class="odd">
<td align="left">1st</td>
<td align="left">Male</td>
<td align="left">Yes</td>
<td align="right">62</td>
</tr>
<tr class="even">
<td align="left">2nd</td>
<td align="left">Male</td>
<td align="left">Yes</td>
<td align="right">25</td>
</tr>
<tr class="odd">
<td align="left">3rd</td>
<td align="left">Male</td>
<td align="left">Yes</td>
<td align="right">88</td>
</tr>
<tr class="even">
<td align="left">Crew</td>
<td align="left">Male</td>
<td align="left">Yes</td>
<td align="right">192</td>
</tr>
<tr class="odd">
<td align="left">1st</td>
<td align="left">Female</td>
<td align="left">Yes</td>
<td align="right">141</td>
</tr>
<tr class="even">
<td align="left">2nd</td>
<td align="left">Female</td>
<td align="left">Yes</td>
<td align="right">93</td>
</tr>
<tr class="odd">
<td align="left">3rd</td>
<td align="left">Female</td>
<td align="left">Yes</td>
<td align="right">90</td>
</tr>
<tr class="even">
<td align="left">Crew</td>
<td align="left">Female</td>
<td align="left">Yes</td>
<td align="right">20</td>
</tr>
</tbody>
</table>
<div class="sourceCode"><pre class="sourceCode r"><code class="sourceCode r"><span class="kw">echartr</span>(titanic_sex, Survived, Count, Class, <span class="dt">facet=</span>Sex, 
        <span class="dt">type=</span><span class="kw">c</span>(<span class="kw">rep</span>(<span class="st">&#39;ring&#39;</span>, <span class="dv">3</span>), <span class="st">&#39;pie&#39;</span>), <span class="dt">subtype=</span><span class="st">&#39;clock&#39;</span>) %&gt;%<span class="st"> </span>
<span class="st">    </span><span class="kw">setTitle</span>(<span class="st">&#39;Titanic: Cabin-specific Survival Outcome by Sex&#39;</span>)</code></pre></div>
<div id="htmlwidget-dcd72430d91c64ce62a0" style="width:672px;height:480px;" class="echarts html-widget"></div>
<script type="application/json" data-for="htmlwidget-dcd72430d91c64ce62a0">{"x":{"series":[{"name":"1st","type":"pie","data":[{"name":"No","value":118,"itemStyle":{"normal":{"label":{"show":false},"labelLine":{"show":false}}}},{"name":"Yes","value":62,"itemStyle":{"normal":{"label":{"show":false},"labelLine":{"show":false}}}}],"center":["27.5%","50%"],"width":"42.5%","x":"6.25%","radius":["37.1875%","42.5%"],"max":670,"height":"70%","y":"15%","selectedMode":"single","itemStyle":{"normal":{"label":{"show":true}},"emphasis":{"label":{"show":true,"position":"center","textStyle":{"fontSize":"30","fontWeight":"bold"}}}},"clockWise":true},{"name":"2nd","type":"pie","data":[{"name":"No","value":154,"itemStyle":{"normal":{"label":{"show":false},"labelLine":{"show":false}}}},{"name":"Yes","value":25,"itemStyle":{"normal":{"label":{"show":false},"labelLine":{"show":false}}}}],"center":["27.5%","50%"],"width":"31.875%","x":"11.5625%","radius":["26.5625%","31.875%"],"max":670,"height":"70%","y":"15%","selectedMode":"single","itemStyle":{"normal":{"label":{"show":true}},"emphasis":{"label":{"show":true,"position":"center","textStyle":{"fontSize":"30","fontWeight":"bold"}}}},"clockWise":true},{"name":"3rd","type":"pie","data":[{"name":"No","value":422,"itemStyle":{"normal":{"label":{"show":false},"labelLine":{"show":false}}}},{"name":"Yes","value":88,"itemStyle":{"normal":{"label":{"show":false},"labelLine":{"show":false}}}}],"center":["27.5%","50%"],"width":"21.25%","x":"16.875%","radius":["15.9375%","21.25%"],"max":670,"height":"70%","y":"15%","selectedMode":"single","itemStyle":{"normal":{"label":{"show":true}},"emphasis":{"label":{"show":true,"position":"center","textStyle":{"fontSize":"30","fontWeight":"bold"}}}},"clockWise":true},{"name":"Crew","type":"pie","data":[{"name":"No","value":670,"itemStyle":{"normal":{"label":{"show":false},"labelLine":{"show":false}}}},{"name":"Yes","value":192,"itemStyle":{"normal":{"label":{"show":false},"labelLine":{"show":false}}}}],"center":["27.5%","50%"],"width":"10.625%","x":"22.1875%","radius":"10.625%","max":670,"height":"70%","y":"15%","selectedMode":"single"},{"name":"1st","type":"pie","data":[{"name":"No","value":4,"itemStyle":{"normal":{"label":{"show":false},"labelLine":{"show":false}}}},{"name":"Yes","value":141,"itemStyle":{"normal":{"label":{"show":false},"labelLine":{"show":false}}}}],"center":["72.5%","50%"],"width":"42.5%","x":"51.25%","radius":["37.1875%","42.5%"],"max":141,"height":"70%","y":"15%","selectedMode":"single","itemStyle":{"normal":{"label":{"show":true}},"emphasis":{"label":{"show":true,"position":"center","textStyle":{"fontSize":"30","fontWeight":"bold"}}}},"clockWise":true},{"name":"2nd","type":"pie","data":[{"name":"No","value":13,"itemStyle":{"normal":{"label":{"show":false},"labelLine":{"show":false}}}},{"name":"Yes","value":93,"itemStyle":{"normal":{"label":{"show":false},"labelLine":{"show":false}}}}],"center":["72.5%","50%"],"width":"31.875%","x":"56.5625%","radius":["26.5625%","31.875%"],"max":141,"height":"70%","y":"15%","selectedMode":"single","itemStyle":{"normal":{"label":{"show":true}},"emphasis":{"label":{"show":true,"position":"center","textStyle":{"fontSize":"30","fontWeight":"bold"}}}},"clockWise":true},{"name":"3rd","type":"pie","data":[{"name":"No","value":106,"itemStyle":{"normal":{"label":{"show":false},"labelLine":{"show":false}}}},{"name":"Yes","value":90,"itemStyle":{"normal":{"label":{"show":false},"labelLine":{"show":false}}}}],"center":["72.5%","50%"],"width":"21.25%","x":"61.875%","radius":["15.9375%","21.25%"],"max":141,"height":"70%","y":"15%","selectedMode":"single","itemStyle":{"normal":{"label":{"show":true}},"emphasis":{"label":{"show":true,"position":"center","textStyle":{"fontSize":"30","fontWeight":"bold"}}}},"clockWise":true},{"name":"Crew","type":"pie","data":[{"name":"No","value":3,"itemStyle":{"normal":{"label":{"show":false},"labelLine":{"show":false}}}},{"name":"Yes","value":20,"itemStyle":{"normal":{"label":{"show":false},"labelLine":{"show":false}}}}],"center":["72.5%","50%"],"width":"10.625%","x":"67.1875%","radius":"10.625%","max":141,"height":"70%","y":"15%","selectedMode":"single"}],"legend":{"show":true,"data":["No","Yes"],"x":"left","y":"top","orient":"horizontal"},"xAxis":[{"type":"category","show":false,"position":"bottom","name":"","nameLocation":"end","boundaryGap":[0,0],"scale":true,"axisLine":{"show":true,"onZero":false},"axisTick":{"show":false},"axisLabel":{"show":true},"splitLine":{"show":true},"splitArea":{"show":false},"data":["No","Yes"]}],"yAxis":[{"type":"value","show":false,"position":"left","name":"","nameLocation":"end","boundaryGap":[0,0],"scale":true,"axisLine":{"show":true,"onZero":false},"axisTick":{"show":false},"axisLabel":{"show":true},"splitLine":{"show":true},"splitArea":{"show":false}}],"grid":{"borderWidth":0},"tooltip":{"show":true,"trigger":"item","axisPointer":{"type":"none","crossStyle":{"type":"dashed"},"lineStyle":{"type":"solid","width":1},"shadowStyle":{"color":"rgba(150,150,150,0.3)","width":"auto","type":"default"}},"textStyle":{"color":"#fff"},"formatter":"{a} <br/>{b} : {c} ({d}%)","islandFormatter":"{a} < br/>{b} : {c}","enterable":false,"showDelay":20,"hideDelay":100,"transitionDuration":0.4,"backgroundColor":"rgba(0,0,0,0.7)","borderColor":"#333","borderWidth":0,"borderRadius":4},"toolbox":{"show":true,"feature":{"mark":{"show":true},"dataZoom":{"show":true},"dataView":{"show":true,"readOnly":false},"magicType":{"show":true,"type":["pie","funnel"]},"restore":{"show":true},"saveAsImage":{"show":true}},"x":"right","y":"top","orient":"horizontal"},"title":{"text":"Titanic: Cabin-specific Survival Outcome by Sex","x":"center","y":"bottom","orient":"horizontal"}},"evals":[],"jsHooks":[]}</script>
</div>
<div id="pies-with-timeline" class="section level3">
<h3><span class="header-section-number">3.2.5</span> Pies With Timeline</h3>
<p>We need another variable as timeline. Let’s say, ‘sex’.</p>
<div class="sourceCode"><pre class="sourceCode r"><code class="sourceCode r"><span class="kw">echartr</span>(titanic_sex, Survived, Count, <span class="dt">facet=</span>Class, <span class="dt">t=</span>Sex, <span class="dt">type=</span><span class="st">&#39;pie&#39;</span>) %&gt;%<span class="st"> </span>
<span class="st">    </span><span class="kw">setTitle</span>(<span class="st">&quot;Titanic: Survival Outcome by Cabin Class Across Sex&quot;</span>) %&gt;%
<span class="st">    </span><span class="kw">setPolar</span>(<span class="dt">radius=</span><span class="st">&#39;30%&#39;</span>)</code></pre></div>
<div id="htmlwidget-2b81936cefc15272c534" style="width:672px;height:480px;" class="echarts html-widget"></div>
<script type="application/json" data-for="htmlwidget-2b81936cefc15272c534">{"x":{"timeline":{"type":"number","data":["Male","Female"],"x":80,"x2":80,"y2":50},"options":[{"series":[{"name":"1st","type":"pie","data":[{"name":"No","value":118,"itemStyle":{"normal":{"label":{"show":false},"labelLine":{"show":false}}}},{"name":"Yes","value":62,"itemStyle":{"normal":{"label":{"show":false},"labelLine":{"show":false}}}}],"center":["27.5%","25%"],"width":"37.5%","x":"8.75%","radius":"37.5%","max":118,"height":"37.5%","y":"6.25%","selectedMode":"single"},{"name":"2nd","type":"pie","data":[{"name":"No","value":154,"itemStyle":{"normal":{"label":{"show":false},"labelLine":{"show":false}}}},{"name":"Yes","value":25,"itemStyle":{"normal":{"label":{"show":false},"labelLine":{"show":false}}}}],"center":["72.5%","25%"],"width":"37.5%","x":"53.75%","radius":"37.5%","max":154,"height":"37.5%","y":"6.25%","selectedMode":"single"},{"name":"3rd","type":"pie","data":[{"name":"No","value":422,"itemStyle":{"normal":{"label":{"show":false},"labelLine":{"show":false}}}},{"name":"Yes","value":88,"itemStyle":{"normal":{"label":{"show":false},"labelLine":{"show":false}}}}],"center":["27.5%","65%"],"width":"37.5%","x":"8.75%","radius":"37.5%","max":422,"height":"37.5%","y":"46.25%","selectedMode":"single"},{"name":"Crew","type":"pie","data":[{"name":"No","value":670,"itemStyle":{"normal":{"label":{"show":false},"labelLine":{"show":false}}}},{"name":"Yes","value":192,"itemStyle":{"normal":{"label":{"show":false},"labelLine":{"show":false}}}}],"center":["72.5%","65%"],"width":"37.5%","x":"53.75%","radius":"37.5%","max":670,"height":"37.5%","y":"46.25%","selectedMode":"single"}],"xAxis":[{"type":"category","show":false,"position":"bottom","name":"","nameLocation":"end","boundaryGap":[0,0],"scale":true,"axisLine":{"show":true,"onZero":false},"axisTick":{"show":false},"axisLabel":{"show":true},"splitLine":{"show":true},"splitArea":{"show":false},"data":["No","Yes"]}],"yAxis":[{"type":"value","show":false,"position":"left","name":"","nameLocation":"end","boundaryGap":[0,0],"scale":true,"axisLine":{"show":true,"onZero":false},"axisTick":{"show":false},"axisLabel":{"show":true},"splitLine":{"show":true},"splitArea":{"show":false}}],"grid":{"borderWidth":0},"tooltip":{"show":true,"trigger":"item","axisPointer":{"type":"none","crossStyle":{"type":"dashed"},"lineStyle":{"type":"solid","width":1},"shadowStyle":{"color":"rgba(150,150,150,0.3)","width":"auto","type":"default"}},"textStyle":{"color":"#fff"},"formatter":"{a} <br/>{b} : {c} ({d}%)","islandFormatter":"{a} < br/>{b} : {c}","enterable":false,"showDelay":20,"hideDelay":100,"transitionDuration":0.4,"backgroundColor":"rgba(0,0,0,0.7)","borderColor":"#333","borderWidth":0,"borderRadius":4},"toolbox":{"show":true,"feature":{"mark":{"show":true},"dataZoom":{"show":true},"dataView":{"show":true,"readOnly":false},"magicType":{"show":true,"type":["pie","funnel"]},"restore":{"show":true},"saveAsImage":{"show":true}},"x":"right","y":"top","orient":"horizontal"},"legend":{"show":true,"data":["No","Yes"],"x":"left","y":"top","orient":"horizontal"},"title":{"text":"Titanic: Survival Outcome by Cabin Class Across Sex (Sex: Male)","x":"center","y":"bottom","orient":"horizontal"}},{"series":[{"name":"1st","type":"pie","data":[{"name":"No","value":4,"itemStyle":{"normal":{"label":{"show":false},"labelLine":{"show":false}}}},{"name":"Yes","value":141,"itemStyle":{"normal":{"label":{"show":false},"labelLine":{"show":false}}}}],"center":["27.5%","25%"],"width":"37.5%","x":"8.75%","radius":"37.5%","max":141,"height":"37.5%","y":"6.25%","selectedMode":"single"},{"name":"2nd","type":"pie","data":[{"name":"No","value":13,"itemStyle":{"normal":{"label":{"show":false},"labelLine":{"show":false}}}},{"name":"Yes","value":93,"itemStyle":{"normal":{"label":{"show":false},"labelLine":{"show":false}}}}],"center":["72.5%","25%"],"width":"37.5%","x":"53.75%","radius":"37.5%","max":93,"height":"37.5%","y":"6.25%","selectedMode":"single"},{"name":"3rd","type":"pie","data":[{"name":"No","value":106,"itemStyle":{"normal":{"label":{"show":false},"labelLine":{"show":false}}}},{"name":"Yes","value":90,"itemStyle":{"normal":{"label":{"show":false},"labelLine":{"show":false}}}}],"center":["27.5%","65%"],"width":"37.5%","x":"8.75%","radius":"37.5%","max":106,"height":"37.5%","y":"46.25%","selectedMode":"single"},{"name":"Crew","type":"pie","data":[{"name":"No","value":3,"itemStyle":{"normal":{"label":{"show":false},"labelLine":{"show":false}}}},{"name":"Yes","value":20,"itemStyle":{"normal":{"label":{"show":false},"labelLine":{"show":false}}}}],"center":["72.5%","65%"],"width":"37.5%","x":"53.75%","radius":"37.5%","max":20,"height":"37.5%","y":"46.25%","selectedMode":"single"}],"title":{"text":"Titanic: Survival Outcome by Cabin Class Across Sex (Sex: Female)","x":"center","y":"bottom","orient":"horizontal"}}]},"evals":[],"jsHooks":[]}</script>
</div>
</div>
<div id="ring-chart" class="section level2">
<h2><span class="header-section-number">3.3</span> Ring Chart</h2>
<div id="regular-ring-chart" class="section level3">
<h3><span class="header-section-number">3.3.1</span> Regular Ring Chart</h3>
<p><code>type</code> is set ‘ring’.</p>
<div class="sourceCode"><pre class="sourceCode r"><code class="sourceCode r"><span class="kw">echartr</span>(titanic, Survived, Count, <span class="dt">facet=</span>Class, <span class="dt">type=</span><span class="st">&#39;ring&#39;</span>) %&gt;%
<span class="st">    </span><span class="kw">setTitle</span>(<span class="st">&#39;Titanic: Survival Outcome by Cabin Class&#39;</span>)</code></pre></div>
<div id="htmlwidget-697db5791522cfff53b5" style="width:672px;height:480px;" class="echarts html-widget"></div>
<script type="application/json" data-for="htmlwidget-697db5791522cfff53b5">{"x":{"series":[{"name":"1st","type":"pie","data":[{"name":"No","value":122,"itemStyle":{"normal":{"label":{"show":false},"labelLine":{"show":false}}}},{"name":"Yes","value":203,"itemStyle":{"normal":{"label":{"show":false},"labelLine":{"show":false}}}}],"center":["27.5%","27.5%"],"width":"42.5%","x":"6.25%","radius":["21.25%","42.5%"],"max":203,"height":"42.5%","y":"6.25%","selectedMode":"single","itemStyle":{"normal":{"label":{"show":true}},"emphasis":{"label":{"show":true,"position":"center","textStyle":{"fontSize":"30","fontWeight":"bold"}}}},"clockWise":false},{"name":"2nd","type":"pie","data":[{"name":"No","value":167,"itemStyle":{"normal":{"label":{"show":false},"labelLine":{"show":false}}}},{"name":"Yes","value":118,"itemStyle":{"normal":{"label":{"show":false},"labelLine":{"show":false}}}}],"center":["72.5%","27.5%"],"width":"42.5%","x":"51.25%","radius":["21.25%","42.5%"],"max":167,"height":"42.5%","y":"6.25%","selectedMode":"single","itemStyle":{"normal":{"label":{"show":true}},"emphasis":{"label":{"show":true,"position":"center","textStyle":{"fontSize":"30","fontWeight":"bold"}}}},"clockWise":false},{"name":"3rd","type":"pie","data":[{"name":"No","value":528,"itemStyle":{"normal":{"label":{"show":false},"labelLine":{"show":false}}}},{"name":"Yes","value":178,"itemStyle":{"normal":{"label":{"show":false},"labelLine":{"show":false}}}}],"center":["27.5%","72.5%"],"width":"42.5%","x":"6.25%","radius":["21.25%","42.5%"],"max":528,"height":"42.5%","y":"51.25%","selectedMode":"single","itemStyle":{"normal":{"label":{"show":true}},"emphasis":{"label":{"show":true,"position":"center","textStyle":{"fontSize":"30","fontWeight":"bold"}}}},"clockWise":false},{"name":"Crew","type":"pie","data":[{"name":"No","value":673,"itemStyle":{"normal":{"label":{"show":false},"labelLine":{"show":false}}}},{"name":"Yes","value":212,"itemStyle":{"normal":{"label":{"show":false},"labelLine":{"show":false}}}}],"center":["72.5%","72.5%"],"width":"42.5%","x":"51.25%","radius":["21.25%","42.5%"],"max":673,"height":"42.5%","y":"51.25%","selectedMode":"single","itemStyle":{"normal":{"label":{"show":true}},"emphasis":{"label":{"show":true,"position":"center","textStyle":{"fontSize":"30","fontWeight":"bold"}}}},"clockWise":false}],"xAxis":[{"type":"category","show":false,"position":"bottom","name":"","nameLocation":"end","boundaryGap":[0,0],"scale":true,"axisLine":{"show":true,"onZero":false},"axisTick":{"show":false},"axisLabel":{"show":true},"splitLine":{"show":true},"splitArea":{"show":false},"data":["No","Yes"]}],"yAxis":[{"type":"value","show":false,"position":"left","name":"","nameLocation":"end","boundaryGap":[0,0],"scale":true,"axisLine":{"show":true,"onZero":false},"axisTick":{"show":false},"axisLabel":{"show":true},"splitLine":{"show":true},"splitArea":{"show":false}}],"grid":{"borderWidth":0},"tooltip":{"show":true,"trigger":"item","axisPointer":{"type":"none","crossStyle":{"type":"dashed"},"lineStyle":{"type":"solid","width":1},"shadowStyle":{"color":"rgba(150,150,150,0.3)","width":"auto","type":"default"}},"textStyle":{"color":"#fff"},"formatter":"{a} <br/>{b} : {c} ({d}%)","islandFormatter":"{a} < br/>{b} : {c}","enterable":false,"showDelay":20,"hideDelay":100,"transitionDuration":0.4,"backgroundColor":"rgba(0,0,0,0.7)","borderColor":"#333","borderWidth":0,"borderRadius":4},"toolbox":{"show":true,"feature":{"mark":{"show":true},"dataZoom":{"show":true},"dataView":{"show":true,"readOnly":false},"magicType":{"show":true,"type":["pie","funnel"]},"restore":{"show":true},"saveAsImage":{"show":true}},"x":"right","y":"top","orient":"horizontal"},"legend":{"show":true,"data":["No","Yes"],"x":"left","y":"top","orient":"horizontal"},"title":{"text":"Titanic: Survival Outcome by Cabin Class","x":"center","y":"bottom","orient":"horizontal"}},"evals":[],"jsHooks":[]}</script>
</div>
<div id="infographic-ring-chart" class="section level3">
<h3><span class="header-section-number">3.3.2</span> Infographic Ring Chart</h3>
<p>Infographic ring chart is a special type. We need to carefully configure the aesthetic parameters step by step.</p>
<div class="sourceCode"><pre class="sourceCode r"><code class="sourceCode r">ds &lt;-<span class="st"> </span><span class="kw">data.frame</span>(<span class="dt">q=</span><span class="kw">c</span>(<span class="st">&#39;68% feel good&#39;</span>, <span class="st">&#39;29% feel bad&#39;</span>, <span class="st">&#39;3% have no feelings&#39;</span>),
              <span class="dt">a=</span><span class="kw">c</span>(<span class="dv">68</span>, <span class="dv">29</span>, <span class="dv">3</span>))</code></pre></div>
<p>Build the base chart.</p>
<div class="sourceCode"><pre class="sourceCode r"><code class="sourceCode r">g &lt;-<span class="st"> </span><span class="kw">echartr</span>(ds, q, a, <span class="dt">type=</span><span class="st">&#39;ring&#39;</span>, <span class="dt">subtype=</span><span class="st">&#39;info&#39;</span>) %&gt;%<span class="st"> </span>
<span class="st">    </span><span class="kw">setTheme</span>(<span class="st">&#39;macarons&#39;</span>, <span class="dt">width=</span><span class="dv">800</span>, <span class="dt">height=</span><span class="dv">600</span>) %&gt;%
<span class="st">    </span><span class="kw">setTitle</span>(<span class="st">&#39;How do you feel?&#39;</span>,<span class="st">&#39;ring_info&#39;</span>, 
             <span class="dt">pos=</span><span class="kw">c</span>(<span class="st">&#39;center&#39;</span>,<span class="st">&#39;center&#39;</span>, <span class="st">&#39;horizontal&#39;</span>))
g</code></pre></div>
<div id="htmlwidget-dd7ba96267f93d236530" style="width:800px;height:600px;" class="echarts html-widget"></div>
<script type="application/json" data-for="htmlwidget-dd7ba96267f93d236530">{"x":{"series":[{"name":"68% feel good","type":"pie","data":[{"name":"68% feel good","value":68,"itemStyle":{"normal":{"label":{"show":false},"labelLine":{"show":false}}}},{"name":"","value":32,"itemStyle":{"normal":{"color":"rgba(0,0,0,0)","label":{"show":false},"labelLine":{"show":false}},"emphasis":{"color":"rgba(0,0,0,0)"}}}],"center":["50%","50%"],"width":"26.6666666666667%","x":"6.66666666666667%","radius":["80%","66.6666666666667%"],"max":68,"height":"70%","y":"15%","selectedMode":"single","itemStyle":{"normal":{"label":{"show":true}},"emphasis":{"label":{"show":true,"position":"center","textStyle":{"fontSize":"30","fontWeight":"bold"}}}},"clockWise":false},{"name":"29% feel bad","type":"pie","data":[{"name":"29% feel bad","value":29,"itemStyle":{"normal":{"label":{"show":false},"labelLine":{"show":false}}}},{"name":"","value":71,"itemStyle":{"normal":{"color":"rgba(0,0,0,0)","label":{"show":false},"labelLine":{"show":false}},"emphasis":{"color":"rgba(0,0,0,0)"}}}],"center":["50%","50%"],"width":"26.6666666666667%","x":"36.6666666666667%","radius":["66.6666666666667%","53.3333333333333%"],"max":71,"height":"70%","y":"15%","selectedMode":"single","itemStyle":{"normal":{"label":{"show":true}},"emphasis":{"label":{"show":true,"position":"center","textStyle":{"fontSize":"30","fontWeight":"bold"}}}},"clockWise":false},{"name":"3% have no feelings","type":"pie","data":[{"name":"3% have no feelings","value":3,"itemStyle":{"normal":{"label":{"show":false},"labelLine":{"show":false}}}},{"name":"","value":97,"itemStyle":{"normal":{"color":"rgba(0,0,0,0)","label":{"show":false},"labelLine":{"show":false}},"emphasis":{"color":"rgba(0,0,0,0)"}}}],"center":["50%","50%"],"width":"26.6666666666667%","x":"66.6666666666667%","radius":["53.3333333333333%","40%"],"max":97,"height":"70%","y":"15%","selectedMode":"single","itemStyle":{"normal":{"label":{"show":true}},"emphasis":{"label":{"show":true,"position":"center","textStyle":{"fontSize":"30","fontWeight":"bold"}}}},"clockWise":false}],"xAxis":[{"type":"category","show":false,"position":"bottom","name":"","nameLocation":"end","boundaryGap":[0,0],"scale":true,"axisLine":{"show":true,"onZero":false},"axisTick":{"show":false},"axisLabel":{"show":true},"splitLine":{"show":true},"splitArea":{"show":false},"data":["68% feel good","29% feel bad","3% have no feelings"]}],"yAxis":[{"type":"value","show":false,"position":"left","name":"","nameLocation":"end","boundaryGap":[0,0],"scale":true,"axisLine":{"show":true,"onZero":false},"axisTick":{"show":false},"axisLabel":{"show":true},"splitLine":{"show":true},"splitArea":{"show":false}}],"grid":{"borderWidth":0},"tooltip":{"show":true,"trigger":"item","axisPointer":{"type":"none","crossStyle":{"type":"dashed"},"lineStyle":{"type":"solid","width":1},"shadowStyle":{"color":"rgba(150,150,150,0.3)","width":"auto","type":"default"}},"textStyle":{"color":"#fff"},"formatter":"{a} <br/>{b} : {c} ({d}%)","islandFormatter":"{a} < br/>{b} : {c}","enterable":false,"showDelay":20,"hideDelay":100,"transitionDuration":0.4,"backgroundColor":"rgba(0,0,0,0.7)","borderColor":"#333","borderWidth":0,"borderRadius":4},"toolbox":{"show":true,"feature":{"mark":{"show":true},"dataZoom":{"show":true},"dataView":{"show":true,"readOnly":false},"magicType":{"show":true,"type":["pie","funnel"]},"restore":{"show":true},"saveAsImage":{"show":true}},"x":"right","y":"top","orient":"horizontal"},"legend":{"show":true,"data":["68% feel good","29% feel bad","3% have no feelings"],"x":"left","y":"top","orient":"horizontal"},"theme":"macarons","title":{"text":"How do you feel?","subtext":"ring_info","x":"center","y":"center","orient":"horizontal"}},"evals":[],"jsHooks":[]}</script>
<p>But the legend is not at the right position. So we first set its <code>pos=c('center','top','vertical')</code>, then tune the location using <code>relocLegend</code>.</p>
<blockquote>
<p><code>echartr</code> uses <code>tuneGrid</code> function to adjust the sizing, positioning of all the widgets, so if you set the exact sizing and positionning paramemters using <code>setLegend</code>, it will be overrided. <code>relocWidget</code> is always recommended to be used at the end of the pipe chain call.</p>
</blockquote>
<div class="sourceCode"><pre class="sourceCode r"><code class="sourceCode r">width =<span class="st"> </span><span class="dv">800</span>
height =<span class="st"> </span><span class="dv">600</span>
g %&gt;%<span class="st"> </span><span class="kw">setLegend</span>(<span class="dt">pos=</span><span class="kw">c</span>(<span class="st">&#39;center&#39;</span>,<span class="st">&#39;top&#39;</span>,<span class="st">&#39;vertical&#39;</span>), <span class="dt">itemGap=</span>height/<span class="dv">25</span>) %&gt;%
<span class="st">    </span><span class="kw">relocLegend</span>(<span class="dt">x=</span>width/<span class="dv">2</span>, <span class="dt">y=</span>height/<span class="dv">8</span>)</code></pre></div>
<div id="htmlwidget-89676362f9cc2bf1f8e1" style="width:800px;height:600px;" class="echarts html-widget"></div>
<script type="application/json" data-for="htmlwidget-89676362f9cc2bf1f8e1">{"x":{"series":[{"name":"68% feel good","type":"pie","data":[{"name":"68% feel good","value":68,"itemStyle":{"normal":{"label":{"show":false},"labelLine":{"show":false}}}},{"name":"","value":32,"itemStyle":{"normal":{"color":"rgba(0,0,0,0)","label":{"show":false},"labelLine":{"show":false}},"emphasis":{"color":"rgba(0,0,0,0)"}}}],"center":["50%","50%"],"width":"26.6666666666667%","x":"6.66666666666667%","radius":["80%","66.6666666666667%"],"max":68,"height":"70%","y":"15%","selectedMode":"single","itemStyle":{"normal":{"label":{"show":true}},"emphasis":{"label":{"show":true,"position":"center","textStyle":{"fontSize":"30","fontWeight":"bold"}}}},"clockWise":false},{"name":"29% feel bad","type":"pie","data":[{"name":"29% feel bad","value":29,"itemStyle":{"normal":{"label":{"show":false},"labelLine":{"show":false}}}},{"name":"","value":71,"itemStyle":{"normal":{"color":"rgba(0,0,0,0)","label":{"show":false},"labelLine":{"show":false}},"emphasis":{"color":"rgba(0,0,0,0)"}}}],"center":["50%","50%"],"width":"26.6666666666667%","x":"36.6666666666667%","radius":["66.6666666666667%","53.3333333333333%"],"max":71,"height":"70%","y":"15%","selectedMode":"single","itemStyle":{"normal":{"label":{"show":true}},"emphasis":{"label":{"show":true,"position":"center","textStyle":{"fontSize":"30","fontWeight":"bold"}}}},"clockWise":false},{"name":"3% have no feelings","type":"pie","data":[{"name":"3% have no feelings","value":3,"itemStyle":{"normal":{"label":{"show":false},"labelLine":{"show":false}}}},{"name":"","value":97,"itemStyle":{"normal":{"color":"rgba(0,0,0,0)","label":{"show":false},"labelLine":{"show":false}},"emphasis":{"color":"rgba(0,0,0,0)"}}}],"center":["50%","50%"],"width":"26.6666666666667%","x":"66.6666666666667%","radius":["53.3333333333333%","40%"],"max":97,"height":"70%","y":"15%","selectedMode":"single","itemStyle":{"normal":{"label":{"show":true}},"emphasis":{"label":{"show":true,"position":"center","textStyle":{"fontSize":"30","fontWeight":"bold"}}}},"clockWise":false}],"xAxis":[{"type":"category","show":false,"position":"bottom","name":"","nameLocation":"end","boundaryGap":[0,0],"scale":true,"axisLine":{"show":true,"onZero":false},"axisTick":{"show":false},"axisLabel":{"show":true},"splitLine":{"show":true},"splitArea":{"show":false},"data":["68% feel good","29% feel bad","3% have no feelings"]}],"yAxis":[{"type":"value","show":false,"position":"left","name":"","nameLocation":"end","boundaryGap":[0,0],"scale":true,"axisLine":{"show":true,"onZero":false},"axisTick":{"show":false},"axisLabel":{"show":true},"splitLine":{"show":true},"splitArea":{"show":false}}],"grid":{"borderWidth":0},"tooltip":{"show":true,"trigger":"item","axisPointer":{"type":"none","crossStyle":{"type":"dashed"},"lineStyle":{"type":"solid","width":1},"shadowStyle":{"color":"rgba(150,150,150,0.3)","width":"auto","type":"default"}},"textStyle":{"color":"#fff"},"formatter":"{a} <br/>{b} : {c} ({d}%)","islandFormatter":"{a} < br/>{b} : {c}","enterable":false,"showDelay":20,"hideDelay":100,"transitionDuration":0.4,"backgroundColor":"rgba(0,0,0,0.7)","borderColor":"#333","borderWidth":0,"borderRadius":4},"toolbox":{"show":true,"feature":{"mark":{"show":true},"dataZoom":{"show":true},"dataView":{"show":true,"readOnly":false},"magicType":{"show":true,"type":["pie","funnel"]},"restore":{"show":true},"saveAsImage":{"show":true}},"x":"right","y":"top","orient":"horizontal"},"legend":{"show":true,"data":["68% feel good","29% feel bad","3% have no feelings"],"x":400,"y":75,"orient":"vertical","itemGap":24},"theme":"macarons","title":{"text":"How do you feel?","subtext":"ring_info","x":"center","y":"center","orient":"horizontal"}},"evals":[],"jsHooks":[]}</script>
</div>
</div>
<div id="nighingale-rose-chart" class="section level2">
<h2><span class="header-section-number">3.4</span> Nighingale Rose Chart</h2>
<div id="radius-mode" class="section level3">
<h3><span class="header-section-number">3.4.1</span> Radius Mode</h3>
<p><code>type</code> is set ‘rose’, <code>subtype</code> is set ‘radius’.</p>
<div class="sourceCode"><pre class="sourceCode r"><code class="sourceCode r"><span class="kw">echartr</span>(titanic_sex, Class, Count, <span class="dt">facet=</span>Survived, <span class="dt">type=</span><span class="st">&#39;rose&#39;</span>, 
        <span class="dt">subtype=</span><span class="st">&#39;radius&#39;</span>) %&gt;%
<span class="st">    </span><span class="kw">setTitle</span>(<span class="st">&#39;Titanic: Survival Outcome by Cabin Class&#39;</span>) </code></pre></div>
<div id="htmlwidget-f08129c83dad11d15c4d" style="width:672px;height:480px;" class="echarts html-widget"></div>
<script type="application/json" data-for="htmlwidget-f08129c83dad11d15c4d">{"x":{"series":[{"name":"No","type":"pie","data":[{"name":"1st","value":122,"itemStyle":{"normal":{"label":{"show":false},"labelLine":{"show":false}}}},{"name":"2nd","value":167,"itemStyle":{"normal":{"label":{"show":false},"labelLine":{"show":false}}}},{"name":"3rd","value":528,"itemStyle":{"normal":{"label":{"show":false},"labelLine":{"show":false}}}},{"name":"Crew","value":673,"itemStyle":{"normal":{"label":{"show":false},"labelLine":{"show":false}}}}],"center":["27.5%","50%"],"width":"42.5%","x":"6.25%","radius":["8.5%","42.5%"],"max":673,"height":"70%","y":"15%","selectedMode":"single","roseType":"radius"},{"name":"Yes","type":"pie","data":[{"name":"1st","value":203,"itemStyle":{"normal":{"label":{"show":false},"labelLine":{"show":false}}}},{"name":"2nd","value":118,"itemStyle":{"normal":{"label":{"show":false},"labelLine":{"show":false}}}},{"name":"3rd","value":178,"itemStyle":{"normal":{"label":{"show":false},"labelLine":{"show":false}}}},{"name":"Crew","value":212,"itemStyle":{"normal":{"label":{"show":false},"labelLine":{"show":false}}}}],"center":["72.5%","50%"],"width":"42.5%","x":"51.25%","radius":["8.5%","42.5%"],"max":212,"height":"70%","y":"15%","selectedMode":"single","roseType":"radius"}],"xAxis":[{"type":"category","show":false,"position":"bottom","name":"","nameLocation":"end","boundaryGap":[0,0],"scale":true,"axisLine":{"show":true,"onZero":false},"axisTick":{"show":false},"axisLabel":{"show":true},"splitLine":{"show":true},"splitArea":{"show":false},"data":["1st","2nd","3rd","Crew"]}],"yAxis":[{"type":"value","show":false,"position":"left","name":"","nameLocation":"end","boundaryGap":[0,0],"scale":true,"axisLine":{"show":true,"onZero":false},"axisTick":{"show":false},"axisLabel":{"show":true},"splitLine":{"show":true},"splitArea":{"show":false}}],"grid":{"borderWidth":0},"tooltip":{"show":true,"trigger":"item","axisPointer":{"type":"none","crossStyle":{"type":"dashed"},"lineStyle":{"type":"solid","width":1},"shadowStyle":{"color":"rgba(150,150,150,0.3)","width":"auto","type":"default"}},"textStyle":{"color":"#fff"},"formatter":"{a} <br/>{b} : {c} ({d}%)","islandFormatter":"{a} < br/>{b} : {c}","enterable":false,"showDelay":20,"hideDelay":100,"transitionDuration":0.4,"backgroundColor":"rgba(0,0,0,0.7)","borderColor":"#333","borderWidth":0,"borderRadius":4},"toolbox":{"show":true,"feature":{"mark":{"show":true},"dataZoom":{"show":true},"dataView":{"show":true,"readOnly":false},"magicType":{"show":true,"type":["pie","funnel"]},"restore":{"show":true},"saveAsImage":{"show":true}},"x":"right","y":"top","orient":"horizontal"},"legend":{"show":true,"data":["1st","2nd","3rd","Crew"],"x":"left","y":"top","orient":"horizontal"},"title":{"text":"Titanic: Survival Outcome by Cabin Class","x":"center","y":"bottom","orient":"horizontal"}},"evals":[],"jsHooks":[]}</script>
</div>
</div>
<div id="area-mode" class="section level2">
<h2><span class="header-section-number">3.5</span> Area Mode</h2>
<p><code>type</code> is set ‘rose’, <code>subtype</code> is set ‘area’.</p>
<div class="sourceCode"><pre class="sourceCode r"><code class="sourceCode r"><span class="kw">echartr</span>(titanic_sex, Class, Count, <span class="dt">facet=</span>Survived, <span class="dt">type=</span><span class="st">&#39;rose&#39;</span>, 
        <span class="dt">subtype=</span><span class="st">&#39;area&#39;</span>) %&gt;%
<span class="st">    </span><span class="kw">setTitle</span>(<span class="st">&#39;Titanic: Survival Outcome by Cabin Class&#39;</span>) </code></pre></div>
<div id="htmlwidget-999e586f8277a1822e47" style="width:672px;height:480px;" class="echarts html-widget"></div>
<script type="application/json" data-for="htmlwidget-999e586f8277a1822e47">{"x":{"series":[{"name":"No","type":"pie","data":[{"name":"1st","value":122,"itemStyle":{"normal":{"label":{"show":false},"labelLine":{"show":false}}}},{"name":"2nd","value":167,"itemStyle":{"normal":{"label":{"show":false},"labelLine":{"show":false}}}},{"name":"3rd","value":528,"itemStyle":{"normal":{"label":{"show":false},"labelLine":{"show":false}}}},{"name":"Crew","value":673,"itemStyle":{"normal":{"label":{"show":false},"labelLine":{"show":false}}}}],"center":["27.5%","50%"],"width":"42.5%","x":"6.25%","radius":["8.5%","42.5%"],"max":673,"height":"70%","y":"15%","selectedMode":"single","roseType":"area"},{"name":"Yes","type":"pie","data":[{"name":"1st","value":203,"itemStyle":{"normal":{"label":{"show":false},"labelLine":{"show":false}}}},{"name":"2nd","value":118,"itemStyle":{"normal":{"label":{"show":false},"labelLine":{"show":false}}}},{"name":"3rd","value":178,"itemStyle":{"normal":{"label":{"show":false},"labelLine":{"show":false}}}},{"name":"Crew","value":212,"itemStyle":{"normal":{"label":{"show":false},"labelLine":{"show":false}}}}],"center":["72.5%","50%"],"width":"42.5%","x":"51.25%","radius":["8.5%","42.5%"],"max":212,"height":"70%","y":"15%","selectedMode":"single","roseType":"area"}],"xAxis":[{"type":"category","show":false,"position":"bottom","name":"","nameLocation":"end","boundaryGap":[0,0],"scale":true,"axisLine":{"show":true,"onZero":false},"axisTick":{"show":false},"axisLabel":{"show":true},"splitLine":{"show":true},"splitArea":{"show":false},"data":["1st","2nd","3rd","Crew"]}],"yAxis":[{"type":"value","show":false,"position":"left","name":"","nameLocation":"end","boundaryGap":[0,0],"scale":true,"axisLine":{"show":true,"onZero":false},"axisTick":{"show":false},"axisLabel":{"show":true},"splitLine":{"show":true},"splitArea":{"show":false}}],"grid":{"borderWidth":0},"tooltip":{"show":true,"trigger":"item","axisPointer":{"type":"none","crossStyle":{"type":"dashed"},"lineStyle":{"type":"solid","width":1},"shadowStyle":{"color":"rgba(150,150,150,0.3)","width":"auto","type":"default"}},"textStyle":{"color":"#fff"},"formatter":"{a} <br/>{b} : {c} ({d}%)","islandFormatter":"{a} < br/>{b} : {c}","enterable":false,"showDelay":20,"hideDelay":100,"transitionDuration":0.4,"backgroundColor":"rgba(0,0,0,0.7)","borderColor":"#333","borderWidth":0,"borderRadius":4},"toolbox":{"show":true,"feature":{"mark":{"show":true},"dataZoom":{"show":true},"dataView":{"show":true,"readOnly":false},"magicType":{"show":true,"type":["pie","funnel"]},"restore":{"show":true},"saveAsImage":{"show":true}},"x":"right","y":"top","orient":"horizontal"},"legend":{"show":true,"data":["1st","2nd","3rd","Crew"],"x":"left","y":"top","orient":"horizontal"},"title":{"text":"Titanic: Survival Outcome by Cabin Class","x":"center","y":"bottom","orient":"horizontal"}},"evals":[],"jsHooks":[]}</script>
</div>
</div>
<div id="futher-setup" class="section level1">
<h1><span class="header-section-number">4</span> Futher Setup</h1>
<p>Then you can configure the widgets, add markLines and/or markPoints, fortify the chart.</p>
<p>You can refer to related functions to play around on your own.</p>
</div>

<script type="text/javascript">
window.onload = function() {
  var i, fig = 1, caps = document.getElementsByClassName('caption');
  for (i = 0; i < caps.length; i++) {
    var cap = caps[i];
    if (cap.parentElement.className !== 'figure' || cap.nodeName !== 'P')
      continue;
    cap.innerHTML = '<span>Figure ' + fig + ':</span> ' + cap.innerHTML;
    fig++;
  }
  fig = 1;
  caps = document.getElementsByTagName('caption');
  for (i = 0; i < caps.length; i++) {
    var cap = caps[i];
    if (cap.parentElement.nodeName !== 'TABLE') continue;
    cap.innerHTML = '<span>Table ' + fig + ':</span> ' + cap.innerHTML;
    fig++;
  }
}
</script>



</div>

<script>

// add bootstrap table styles to pandoc tables
function bootstrapStylePandocTables() {
  $('tr.header').parent('thead').parent('table').addClass('table table-condensed');
}
$(document).ready(function () {
  bootstrapStylePandocTables();
});


</script>

<!-- dynamically load mathjax for compatibility with self-contained -->
<script>
  (function () {
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src  = "https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML";
    document.getElementsByTagName("head")[0].appendChild(script);
  })();
</script>

</body>
</html>
